<html>
	<head>
		<!-- title -->
			<title>Photo Cropping Tool</title>
		
		<!-- stylesheets -->
			<link rel="stylesheet" type="text/css" href="./stylesheets/reset.css" />
			<link rel="stylesheet" type="text/css" href="./stylesheets/clearfix.css" />
			<link rel="stylesheet" type="text/css" href="./stylesheets/main.css" />
			<!--[if IE 6]>
				<link rel="stylesheet" type="text/css" href="./stylesheets/ie6.css" />
			<![endif]-->
		
		<!-- javascripts -->
			<?php if (isset($user -> cropping_image)): ?>
				<script type="text/javascript" src="./javascripts/jquery-1.3.2.min.js"></script>
				<script type="text/javascript" src="./javascripts/jquery.imgareaselect-0.8.min.js"></script>
				<script type="text/javascript">
					$(document).ready(function(){
						// initialising the imgAreaSelect plugin
						$("#crop-workspace #target-image img").imgAreaSelect({
							handles: true,
							keys: true,
							minWidth: <?php echo $page -> crop_width; ?>,
							minHeight: <?php echo $page -> crop_height; ?>,
							aspectRatio: "1:<?php echo ($page -> crop_height / $page -> crop_width); ?>",
							onSelectChange: preview
						});
						
						// generating the placeholder image to act as a thumbnail for the selected image
						$("#crop-workspace").append($('<div id="image-preview"><img src="<?php echo $page -> image_location; ?>" /></div>').css({
							"width": "<?php echo $page -> crop_width; ?>px",
							"height": "<?php echo $page -> crop_height; ?>px"
						}));
						
						// hiding the thumbnail-parameter-list (except the buttons)
						<?php if ($script -> debug_mode == OFF): ?>
							$("#thumbnail-parameter-list li:not([class])").hide();
							$('#thumbnail-parameter-list li[class="buttons"]').css({"padding-top": "0"});
						<?php endif; ?>
						
						// checking to see if the form can be submitted
						$("#save-thumbnail").click(function(e){
							// getting the values populated by the cropping-area imgAreaSelect callback
							var x1, y1, x2, y2, w, h;
							x1 = $('#x1').val();
							y1 = $('#y1').val();
							x2 = $('#x2').val();
							y2 = $('#y2').val();
							w = x2 - x1;
							h = y2 - y1;
							
							// checking to see if they have anything
							// are there any values for the form to work with (before submitting)
							if (x1 == "" || y1 == "" || x2 == "" || y2 == "" || w == "" || h == "" || w == 0 || h == 0)
							{
								alert("You must make a selection first.");
								return false;
							}
							else
							{
								return true;
							}
						});
					});
					
					// the function that enables the selected image to be previewed in the thumbnail
					function preview(image, selection)
					{
						// finding out the details for the thumbnail
						var scaleX = <?php echo $page -> crop_width; ?> / selection.width;
						var scaleY = <?php echo $page -> crop_height; ?> / selection.height;
						
						// working with the placeholder to show a preview of the cropped image
						$("#image-preview img").css({
							"width": Math.round(scaleX * <?php echo $page -> image_width; ?>) + "px",
							"height": Math.round(scaleY * <?php echo $page -> image_height; ?>) + "px",
							"marginLeft": "-" + Math.round(scaleX * selection.x1) + "px",
							"marginTop": "-" + Math.round(scaleY * selection.y1) + "px"
						});
						
						// adjusting the hidden fields for the image processing (to generate the thumbnail)
						$("#x1").val(selection.x1);
						$("#y1").val(selection.y1);
						$("#x2").val(selection.x2);
						$("#y2").val(selection.y2);
					}
				</script>
			<?php endif; ?>
	</head>
	<body>
		<div id="main">
			<h1>Image Processing Tool</h1>
			<?php if (empty($page -> errors) === false): ?>
				<div id="show-errors" class="section">
					<h2>Warning</h2>
					<ul id="error-list">
						<?php foreach ($page -> errors as $error): ?>
							<li><?php echo $error; ?>
						<?php endforeach; ?>
					</ul>
				</div>
			<?php endif; ?>
			<?php if (empty($page -> messages) == false): ?>
				<div id="show-messages" class="section">
					<h2>Message</h2>
					<ul id="message-list">
						<?php foreach ($page -> messages as $message): ?>
							<li><?php echo $message; ?>
						<?php endforeach; ?>
					</ul>
				</div>
			<? endif; ?>
			<?php if (isset($user -> viewing_image)): ?>
				<div id="viewing-image" class="section">
					<h2>View Image</h2>
					<div id="cropped-image" class="section-item">
						<p class="preview"><img src="<?php echo $page -> image_location; ?>" /></p>
					</div>
					<div id="image-description" class="section-item">
						<p><a href="<?php echo basename(__FILE__); ?>">Start over?</a></p>
					</div>
				</div>
			<?php elseif (isset($user -> cropping_image)): ?>
				<div id="cropping-image" class="section">
					<h2>Create Thumbnail</h2>
					<div id="crop-workspace" class="clearfix section-item">
						<div id="target-image">
							<img src="<?php echo $page -> image_location; ?>" />
						</div>
					</div>
					<div id="crop-form" class="section-item">
						<form action="<?php echo basename(__FILE__); ?>" method="post">
							<ul id="crop-parameter-list" class="field-list">
								<li class="buttons">
									<input type="submit" value="Save Thumbnail" id="save-thumbnail" />
									or <a href="<?php echo basename(__FILE__); ?>">cancel</a>
								</li>
							</ul>
							<input type="hidden" name="image_name" value="<?php echo $page -> image_name; ?>" />
							<input type="hidden" name="image_location" value="<?php echo $page -> image_location; ?>" />
							<input type="hidden" name="x1" value="" id="x1" />
							<input type="hidden" name="y1" value="" id="y1" />
							<input type="hidden" name="x2" value="" id="x2" />
							<input type="hidden" name="y2" value="" id="y2" />
						</form>
					</div>
				</div>
				<div id="example-code" class="section">
					<h2>Example Code:</h2>
					<div id="example-of-usage" class="section-item">
						<?php echo $page -> code_example; ?>
					</div>
				</div>
			<?php elseif (isset($user -> choosing_image)): ?>
				<div id="choosing-image" class="section">
					<h2>Upload Photo</h2>
					<div id="image-upload-form" class="section-item">
						<form enctype="multipart/form-data" action="<?php echo basename(__FILE__); ?>" method="post">
							<input type="file" name="new_image" /> <input type="submit" value="Upload" />
						</form>
					</div>
				</div>
			<?php endif; ?>
			<?php if ($script -> debug_mode === ON): ?>
				<div id="debug" class="section">
					<pre><?php
						echo '$_POST:'. "\n". print_r($_POST, true). "\n".
							'$_FILES:'. "\n". print_r($_FILES, true). "\n".
							'$_GET:'. "\n". print_r($_GET, true). "\n".
							'$_COOKIE:'. "\n". print_r($_COOKIE, true). "\n";
						if (isset($_SESSION))
						{
							echo '$_SESSION'. ": \n". print_r($_SESSION, true);
						}
						if (!empty($page -> debug_data))
						{
							foreach ($page -> debug_data as $key => $value)
							{
								echo '$page -> debugData["'. $key. '"]'. ":\n". print_r($value, true). "\n";
							}
						}
					?></pre>
				</div>
				<p id="reset"><a href="<?php echo basename(__FILE__); ?>">Reset</a></p>
			<?php endif; ?>
		</div>
	</body>
</html>